<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商铺主页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../../js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../../css/SM_shopIndex.css"/>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_854207_ldsahzwec.css"/>
		
	</head> 
	<style>
		.show{
		    display: block;
		}
		.unshow{ 
		    display: none;
		}
		.flex{
			display: flex;
		}
		/*向下隐藏*/
		.downHidden{
			transform: translate3d(0,100%,0);
		}
		.down{
			transform: translate3d(0,0,0);
		}
		/*向右平移100%*/
		.transRight{
			transform: translateX(100%);
		}
	</style>
	<body>
		<!--点击搜索键时弹出来的页面-->
		<form action="" method="post">
			<div class="search unshow">
				<!--搜索头-->
				<div class="searchHeader">
					<div class="searchBar fl">
						<span class="icon-fangdajing iconfont searchIcon"></span>
						 <input type="text" name="searchInput" id="searchInput" value="" placeholder="请输入关键字" />
					</div>
					
					<!--取消键-->
					<div class="searchCancel fl">
						取消
					</div>
					<div class="clearfix"></div>
					
				</div>
				<!--搜索主体-->
				<div class="searchContent">
					<!--热门搜索-->
					<div class="hotSearch searchCell">
						<div class="tabTitle">
							热门搜索
							
						</div>
						<div class="tabCell fl">
							保健器械
						</div>
						<!--<div class="clearfix"></div>-->
					</div>
				</div>
				
				
			</div>
		</form>
		
		
		
		<!--点击下架按钮时跳出来-->
		<div class="soldOutWarp unshow warp">
			<!--下架提示框-->
			<div class="soldOutTips tips">
				<div class="soldOutTitle tipTitle">
					确定要下架该商品吗？
				</div>
				<!--下架按钮栏-->
				<div class="soBtnBar tipsBar">
					<div class="soBtn tipsBtn" id="soCancel">取消</div>
					<div class="soBtn soAct tipsBtn" id="so">下架</div>
				</div>
				
			</div>
		</div>
		<!--下架成功后的提示框-->
		<div class="smileTip unshow soSmile">
			<div class="icon-smile iconfont"></div>
			<div class="smileTitle">
				商品下架成功!
			</div>
		</div>
		
		<!--置顶成功后的提示框-->
		<div class="smileTip unshow gtSmile">
			<div class="icon-smile iconfont"></div>
			<div class="smileTitle">
				商品置顶成功!
			</div>
		</div>
		
		<!--点击删除按钮时跳出来-->
		<div class="delWarp unshow warp">
			<!--下架提示框-->
			<div class="delTips tips">
				<div class="delTitle tipTitle">
					确定要删除该商品吗？
				</div>
				<!--下架按钮栏-->
				<div class="delBtnBar tipsBar">
					<div class="delBtn tipsBtn" id="delCancel">取消</div>
					<div class="delBtn soAct tipsBtn" id="del">删除</div>
				</div>
				
			</div>
		</div>
		<!--下架成功后的提示框-->
		<div class="smileTip unshow delSmile">
			<div class="icon-smile iconfont"></div>
			<div class="smileTitle">
				商品删除成功!
			</div>
		</div>
		
		<!--点击推广按钮后显示-->
		<div class="warp generWarp unshow"></div>
		<!--推广标签-->
		<div class="generTab downHidden">
			<!--标签内容-->
			<div class="generCentent">
				<div class="generCell">
					<a href="#">
						<div class="generImg"><img src="../../img/shopManagement/weixin_03.png" alt="" /></div>
						<p>微信好友</p>
					</a>
					
				</div>
				<div class="generCell">
					<a href="#">
						<div class="generImg"><img src="../../img/shopManagement/pengyouquan_03.png" alt="" /></div>
						<p>微信朋友圈</p>
					</a>
					
				</div>
				<div class="generCell">
					<a href="#">
						<div class="generImg"><img src="../../img/shopManagement/sina_03.png" alt="" /></div>
						<p>新浪微博</p>	
					</a>
					
				</div>
				<div class="generCell">
					<a href="#">
						<div class="generImg"><img src="../../img/shopManagement/qqfriends_03.png" alt="" /></div>
						<p>QQ好友</p>
					</a>
					
				</div>
				<div class="generCell">
					<a href="#">
						<div class="generImg"><img src="../../img/shopManagement/qqroom_03.png" alt="" /></div>
						<p>QQ空间</p>
					</a>
					
				</div>
				<div class="generCell">
					<a href="#">
						<div class="generImg"><img src="../../img/shopManagement/lianxiren_03.png" alt="" /></div>
						<p>手机联系人</p>
					</a>
					
				</div>
				<div class="generCell">
					<a href="#">
						<div class="generImg"><img src="../../img/shopManagement/oldClient_03.png" alt="" /></div>
						<p>老客户</p>
					</a>
					
				</div>
				<div class="generCell">
					<a href="#">
						<div class="generImg"><img src="../../img/shopManagement/erweima_03.png" alt="" /></div>
						<p>二维码</p>
					</a>
					
				</div>
				<div class="generCell">
					<a href="#">
						<div class="generImg"><img src="../../img/shopManagement/fuzhi_03.png" alt="" /></div>
						<p>复制链接</p>
					</a>
					
				</div>
			</div>
			
			<!--取消按钮-->
			<div class="generCancel">
				取消
			</div>
		</div>
		
		
		
		<header>
			<!--将图标设为绝对定位，方便后续添加和修改功能图标-->
			小店商品
			<!--左箭头-->
			<div class="left-arrow">
				<span class=" icon-page-left iconfont"></span>
			</div>
			<!--放大镜-->
			<div class="magni">
				<span class="iconfont icon-fangdajing"></span>
			</div>
			<!--完成-->
			<div class="done unshow">
				完成
			</div>
			
		</header>
		<section>
			<!--选项卡-->
			<div class="tabBar">
				<!--选项卡标签-->
				<div class="tabLabel fl active" id="putTab">
					上架商品(<span id="pbNum"></span>)
				</div>
				
				<div class="tabLabel fl" id="soldOutTab">
					已下架(<span>3</span>)
				</div>
				<div class="clearfix"></div>
			</div>
			<!--选项卡内容-->
			<div class="tabContent">
				<!--已上架-->
				<div class="putaway">
					
				</div>
				<!--已下架-->
				<div class="soldOut">
					
				</div>
				
			</div>
		</section>
		
		<footer>
			<!--容器-->
			<div class="footerCellCotainer">
				<div class="footerCell" id="addComd">添加商品</div>
				<div class="footerCell footerCellAct" id="batchManage">批量管理</div>
			</div>
			<!--上架批量管理-->
			<div class="putBat unshow">
				<!--全选-->
				<div class="selectAll fl">
					<span class="selectAllBtn"></span>
					<span>全选</span>
				</div>
				<!--功能键-->
				<div class="pbFunKey">
					<div class="keyCell" id="goTop">移到顶部</div>
					<div class="keyCell" id="putawayBtn">下架</div>
					<div class="keyCell" id="pbDel">删除</div>
				</div>
			</div>
			
		</footer>
		
		<script type="text/javascript" src="../../js/shopIndex.js">  
			
		</script>
		<script type="text/javascript">
//			--------------------------------------------------------------------------------------
			var search = document.querySelector(".search");
//			放大镜
			// 返回箭头
			var back = document.querySelector(".left-arrow")
			var magni = document.querySelector(".magni");
//			点击下架时跳出提示框
			var soldOutWarp = document.querySelector(".soldOutWarp");
//			点击删除时跳出提示框
			var delWarp = document.querySelector(".delWarp");
//			点击推广时跳出标签
			var generWarp = document.querySelector(".generWarp");
			var isBatchManage=false;
			var tabCell;
			var tabCells=new Array;
			var tccSelect;
//			搜索图标
			var magni=document.querySelector(".magni");
			var done=document.querySelector(".done");
			var footerCells = document.querySelectorAll(".footerCell");
			var tabLbs=document.querySelectorAll(".tabLabel");
//			上架板块
			var putaway=document.querySelector(".putaway");
//			下架板块
			var soldOut=document.querySelector(".soldOut");
			var tcContent=document.querySelector(".tcContent");
//			批量管理按钮
			var batchManage=document.querySelector("#batchManage")
			
//			上架按钮
			var putTab=document.querySelector("#putTab");
//			下架按钮
			var soldOutTab=document.querySelector("#soldOutTab");
//			上架删除按钮
			var pbDel=document.querySelector("#pbDel"); 
//			上架商品数量
			var pbNum = document.querySelector("#pbNum");
			
			var searchXhr = new XMLHttpRequest();
			searchXhr.open("GET","https://www.easy-mock.com/mock/5bacb0a93679ca0f56b03fa5/xianYuFanSheng/search");
			searchXhr.send();
			searchXhr.addEventListener("readystatechange",function(e){
				if(e.target.readyState==4&&e.target.status==200){
					var res = JSON.parse(e.target.response);
					var result = res.result;
					console.log(result);
					randerData(result);
					
				}
				
				function randerData(res){
//					res.searchHistory[0];
					var searchHot = res.searchHot;
					var hotSearch = document.querySelector(".hotSearch");
					var template = function(content){
						return `<div class="tabCell fl">
							${content}
						</div>`
					}
					searchHot.forEach((el,index)=>{
						var tabCell = document.createElement("DIV");
						console.log(el.length);
						tabCell.innerHTML=template(el);
						hotSearch.appendChild(tabCell);
					})
					

				}
				
				
				
				
			})
			
			
			
//			点击放大镜时触发事件
			magni.addEventListener("click",function(){
//				search.classList.remove("transRight");
			})
			
			
			
			

			
			for(let j=0;j<=tabLbs.length-1;j++){ 
				tabLbs[j].addEventListener("click",function(){
					for(let i=0;i<tabLbs.length;i++){
						tabLbs[i].classList.remove("active");
					}
					tabLbs[j].classList.add("active");	
					
				})
				
			}
//			选项卡点击事件，切换选项卡
			putTab.addEventListener("click",function(){
				putaway.classList.remove("unshow");
				putaway.classList.add("show");
				soldOut.classList.remove("show");
				soldOut.classList.add("unshow");
				
			})
			soldOutTab.addEventListener("click",function(){
				putaway.classList.remove("show");
				putaway.classList.add("unshow");
				soldOut.classList.remove("unshow");
				soldOut.classList.add("show");
			})
			
			for(var j=0;j<footerCells.length;j++){
	footerCells[j].addEventListener("click",function(e){
		for(let i=0;i<footerCells.length;i++){
			footerCells[i].classList.remove("footerCellAct");
		}
		e.target.classList.add("footerCellAct");
	})
}


//	异步请求商品信息

	var xhr = new XMLHttpRequest();
	xhr.open("GET"," https://www.easy-mock.com/mock/5bacb0a93679ca0f56b03fa5/xianYuFanSheng/shopIndexOrder")
	xhr.send();
	
	xhr.addEventListener("readystatechange",function(){
		
		if(xhr.readyState==4&&xhr.status==200){
			var res = xhr.response;
			console.log(JSON.parse(res)); 
			renderData(res);
//			debugger
//			console.log(renderData(res));
		}
	})	
	function renderData(responce){

		var putaway=document.querySelector(".putaway");
		var dataObj=JSON.parse(responce);
		var template=function(img,inventory,profit,price,title){
			return `<div class="img-warp fl"><img src="${img}"/></div>
						<!--商品内容-->
						<div class="tcContent fl tccWidth">
							<!--商品标题-->
							<div class="comdTitle">${title}</div>
							<!--商品二级标题-->
							<div class="comdSecTitle"> 
								<span class="fl">库存: ${inventory}</span>
								<span class="fr">利润: ${profit}</span>
								<span class="clearfix"></span>
							</div>
							<!--商品底部更多信息栏-->
							<div class="comdMoreBar">
								<p class="fl">售价：<span>${price}</span></p>
								<!--更多-->
								<div class="fr icon-more iconfont"></div>
								<div class="clearfix"></div>
							</div>
						</div>
						
						<div class="clearfix"></div>
						<div class="MoreBar" style="display:none">
							<div class="MoreBarCell">
							<a href="comdEdit.html">
							</a>
								<div class="iconfont icon-edit mbcicon"></div>
								<span>编辑</span>
							</div>
							<div class="MoreBarCell" id="soCell">
								<div class="iconfont icon-download mbcicon"></div>
								<span>下架</span>
							</div>
							<div class="MoreBarCell" id="delCell">
								<div class="iconfont icon-delete mbcicon"></div>
								<span>删除</span>
							</div>
							<div class="MoreBarCell shareCell">
							<a href="#"></a>
								<div class="iconfont icon-share mbcicon"></div>
								<span>推广</span>
							</div>
							<div class="MoreBarCell goTop">
							<a href="#"></a>
								<div class="iconfont icon-zhiding mbcicon"></div>
								<span>置顶</span>
							</div>
						</div>
						`
		}
		dataObj.result.forEach(function(el,index){
			
			tabCell = document.createElement("div");
			tabCell.classList.add("tabCell");
			tabCell.innerHTML=template(el.img,el.inventory,el.profit,el.price,el.title)
			putaway.appendChild(tabCell);
			tabCells.push(tabCell);
			
		})
//		添加上架商品数量
//			上架更多按钮
	var MoreBars = document.querySelectorAll(".MoreBar");
	var pbMoreList = document.querySelectorAll(".icon-more")
		pbNum.innerText=tabCells.length;
		var isMores=[];
		
		for(let i=0;i<tabCells.length;i++){
			isMores.push(false);
		}
		
//		给商品添加事件																		给商品添加事件
		for(let i=0;i<tabCells.length;i++){
			
					tabCells[i].addEventListener("click",function(e){
//							debugger
							if(isBatchManage){
								if(!isTabClicks[i]){
									tabCells[i].children[0].classList.add("iconfont");
									tabCells[i].children[0].classList.add("icon-selected");
									console.log(isTabClicks);
									isTabClicks[i]=true;
								}else{
		//							debugger
									tabCells[i].children[0].classList.remove("iconfont");
									tabCells[i].children[0].classList.remove("icon-selected");
									console.log(isTabClicks);
									isTabClicks[i]=false;
								}
							}else
							
							
//							点击更多图标时,启动事件委托
//							if(e.target.)
							if(!isMores[i]){
								
								if(e.target.classList.contains("icon-more")&&e.target.nodeName=="DIV"){
									
									console.log(isMores[i]);
									for(let j=0;j<tabCells.length;j++){
										pbMoreList[j].classList.remove("icon-cancel");
										pbMoreList[j].classList.add("icon-more");
										MoreBars[j].style.display="none";
										isMores[j]=false;
									}
									MoreBars[i].style.display="flex";
									pbMoreList[i].classList.remove("icon-more");
									pbMoreList[i].classList.add("icon-cancel");
									isMores[i]=true; 
	//								console.log(pbMore);
								}else{
//									在没有点击更多按钮时跳转到编辑页面
									location.href="comdEdit.html";
								}
							}else
							
							if(e.target.classList.contains("icon-cancel")&&e.target.nodeName=="DIV"){
									MoreBars[i].style.display="none";
									pbMoreList[i].classList.remove("icon-cancel");
									pbMoreList[i].classList.add("icon-more");
									isMores[i]=false;
									
							}
							
							
					})
					
					
			}
		
			
			
//			点击下架按钮时的操作
			soldOut();
//			点击删除按钮时的操作
			del();
//			点击推广按钮时的操作
			share();
//			点击置顶按钮时的操作
			goTop();
			
			
			
//			点击下架按钮的函数
			function soldOut(){
				var soSmile = document.querySelector(".soSmile")
				var soCells = document.querySelectorAll("#soCell");
	//			点击下架时取消按钮
				var soCancel = document.querySelector("#soCancel");
	//			点击下架时下架按钮
				var so = document.querySelector("#so");
				var num;
				for(let i=0;i<soCells.length;i++){
					
						soCells[i].addEventListener("click",function(){
							soldOutWarp.classList.remove("unshow");
							soldOutWarp.classList.add("show");
							num = i;
						})
						soCancel.addEventListener("click",function(){
							soldOutWarp.classList.remove("show");
							soldOutWarp.classList.add("unshow");
							
						})
					}
				
				so.addEventListener("click",function(e){
					soldOutWarp.classList.remove("show");
					soldOutWarp.classList.add("unshow");
					soSmile.classList.remove("unshow");
					putaway.removeChild(tabCells[num]);
					pbNum.innerText-=1;
					console.log(tabCells); 
					
					setTimeout(function(){
						soSmile.classList.add("unshow");
					},1000)
				})
				
			}
			
			
//			点击删除按钮的函数
			function del(){
				var delSmile = document.querySelector(".delSmile")
				var delCells = document.querySelectorAll("#delCell");
	//			点击删除时取消按钮
				var delCancel = document.querySelector("#delCancel");
	//			点击删除时下架按钮
				var del = document.querySelector("#del");
				var num;
				for(let i=0;i<delCells.length;i++){
					
						delCells[i].addEventListener("click",function(){
							delWarp.classList.remove("unshow");
							delWarp.classList.add("show");
							num = i;
						})
						delCancel.addEventListener("click",function(){
							delWarp.classList.remove("show");
							delWarp.classList.add("unshow");
							
						})
					}
				
				del.addEventListener("click",function(e){
					delWarp.classList.remove("show");
					delWarp.classList.add("unshow");
					delSmile.classList.remove("unshow");
					putaway.removeChild(tabCells[num]);
					pbNum.innerText-=1;
					console.log(tabCells); 
					setTimeout(function(){
						delSmile.classList.add("unshow");
					},1000)
				})
				
			}
			
//			点击推广按钮时的函数
			function share(){
//				小按钮
				var shareCells = document.querySelectorAll(".shareCell");
//				整个标签内容
				var generTab = document.querySelector(".generTab");
//				取消按钮
				var generCancel = document.querySelector(".generCancel")
				
				for(let i = 0;i<shareCells.length;i++){
					shareCells[i].addEventListener("click",function(){
						generWarp.classList.remove("unshow"); 
						generTab.classList.remove("downHidden");
						generTab.classList.add("down");
						
					})
//					取消按钮
					generCancel.addEventListener("click",function(){
						generWarp.classList.add("unshow"); 
						generTab.classList.remove("down");
						generTab.classList.add("downHidden");
					})
					
				}
				
				
				
			}
			
//			点击置顶按钮时的函数
			function goTop(){
//				置顶按钮
				var goTops = document.querySelectorAll(".goTop");
				var gtSmile = document.querySelector(".gtSmile");
				var tmp;
				
				for(let i = 0;i<goTops.length;i++){
					goTops[i].addEventListener("click",function(e){
						tmp=putaway.children[i];
						putaway.removeChild(putaway.children[i]);
						putaway.insertBefore(tmp,putaway.childNodes[0]); 
						gtSmile.classList.remove("unshow");
						
						var barNode = e.target.parentNode.parentNode;
						barNode.style.display="none";
						isMores[i]=false;
						pbMoreList[i].classList.remove("icon-cancel");
						pbMoreList[i].classList.add("icon-more");
						e.stopPropagation();
						setTimeout(function(){
							gtSmile.classList.add("unshow");
						},1000)
						
					})
				}
				
				
				
			}
		
		
	}
	
	
	
//	!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	
	
	//	异步请求商品信息
//
//	var xhr2 = new XMLHttpRequest();
//	xhr2.open("GET"," https://www.easy-mock.com/mock/5bacb0a93679ca0f56b03fa5/xianYuFanSheng/shopIndexSoldOut");
//	xhr2.send();
//	xhr2.addEventListener("readystatechange",function(){
//		
//		if(xhr2.readyState==4&&xhr.status==200){
//			var res = xhr2.response;
//			console.log(JSON.parse(res)); 
//			console.log("hahaha"); 
//			renderData2(res);
////			debugger
////			console.log(renderData(res));
//		}
//	})	
//	function renderData2(responce){
//
//		var soldOutContent=document.querySelector(".soldOut");
//		var dataObj=JSON.parse(responce);
//		var template=function(img,inventory,profit,price,title){
//			return `<div class="img-warp fl"><img src="${img}"/></div>
//						<!--商品内容-->
//						<div class="tcContent fl tccWidth">
//							<!--商品标题-->
//							<div class="comdTitle">${title}</div>
//							<!--商品二级标题--> 
//							<div class="comdSecTitle"> 
//								<span class="fl">库存: ${inventory}</span>
//								<span class="fr">利润: ${profit}</span>
//								<span class="clearfix"></span>
//							</div>
//							<!--商品底部更多信息栏-->
//							<div class="comdMoreBar">
//								<p class="fl">售价：<span>${price}</span></p>
//								<!--更多-->
//								<div class="fr icon-more iconfont"></div>
//								<div class="clearfix"></div>
//							</div>
//						</div>
//						
//						<div class="clearfix"></div>
//						<div class="MoreBar" style="display:none">
//							<div class="MoreBarCell">
//							<a href="comdEdit.html">
//							</a>
//								<div class="iconfont icon-edit mbcicon"></div>
//								<span>编辑</span>
//							</div>
//							<div class="MoreBarCell" id="soCell">
//								<div class="iconfont icon-download mbcicon"></div>
//								<span>下架</span>
//							</div>
//							<div class="MoreBarCell" id="delCell">
//								<div class="iconfont icon-delete mbcicon"></div>
//								<span>删除</span>
//							</div>
//							<div class="MoreBarCell shareCell">
//							<a href="#"></a>
//								<div class="iconfont icon-share mbcicon"></div>
//								<span>推广</span>
//							</div>
//							<div class="MoreBarCell goTop">
//							<a href="#"></a>
//								<div class="iconfont icon-zhiding mbcicon"></div>
//								<span>置顶</span>
//							</div>
//						</div>
//						`
//		}
//		dataObj.result.forEach(function(el,index){
//			
//			tabCell = document.createElement("div");
//			tabCell.classList.add("tabCell");
//			tabCell.innerHTML=template(el.img,el.inventory,el.profit,el.price,el.title)
//			soldOutContent.appendChild(tabCell);
//			tabCells.push(tabCell);
//			
//		})
////		添加上架商品数量
////			上架更多按钮
//	var MoreBars = document.querySelectorAll(".MoreBar");
//	var pbMoreList = document.querySelectorAll(".icon-more")
//		pbNum.innerText=tabCells.length;
//		var isMores=[];
//		
//		for(let i=0;i<tabCells.length;i++){
//			isMores.push(false);
//		}
//		
////		给商品添加事件																		给商品添加事件
//		for(let i=0;i<tabCells.length;i++){ 
//			
//					tabCells[i].addEventListener("click",function(e){
////							debugger
//							if(isBatchManage){
//								if(!isTabClicks[i]){
//									tabCells[i].children[0].classList.add("iconfont");
//									tabCells[i].children[0].classList.add("icon-selected");
//									console.log(isTabClicks);
//									isTabClicks[i]=true;
//								}else{
//		//							debugger
//									tabCells[i].children[0].classList.remove("iconfont");
//									tabCells[i].children[0].classList.remove("icon-selected");
//									console.log(isTabClicks);
//									isTabClicks[i]=false;
//								}
//							}else
//							
//							
////							点击更多图标时,启动事件委托
////							if(e.target.)
//							if(!isMores[i]){
//								
//								if(e.target.classList.contains("icon-more")&&e.target.nodeName=="DIV"){
//									
//									console.log(isMores[i]);
//									for(let j=0;j<tabCells.length;j++){
//										pbMoreList[j].classList.remove("icon-cancel");
//										pbMoreList[j].classList.add("icon-more");
//										MoreBars[j].style.display="none";
//										isMores[j]=false;
//									}
//									MoreBars[i].style.display="flex";
//									pbMoreList[i].classList.remove("icon-more");
//									pbMoreList[i].classList.add("icon-cancel");
//									isMores[i]=true; 
//	//								console.log(pbMore);
//								}else{
////									在没有点击更多按钮时跳转到编辑页面
//									location.href="comdEdit.html";
//								}
//							}else
//							
//							if(e.target.classList.contains("icon-cancel")&&e.target.nodeName=="DIV"){
//									MoreBars[i].style.display="none";
//									pbMoreList[i].classList.remove("icon-cancel");
//									pbMoreList[i].classList.add("icon-more");
//									isMores[i]=false;
//									
//							}
//							
//							
//					})
//					
//					
//			}
//		
//			
//			
////			点击下架按钮时的操作
//			soldOut();
////			点击删除按钮时的操作
//			del();
////			点击推广按钮时的操作
//			share();
////			点击置顶按钮时的操作
//			goTop();
//			
//			
//			
////			点击下架按钮的函数
//			function soldOut(){
//				var soSmile = document.querySelector(".soSmile")
//				var soCells = document.querySelectorAll("#soCell");
//	//			点击下架时取消按钮
//				var soCancel = document.querySelector("#soCancel");
//	//			点击下架时下架按钮
//				var so = document.querySelector("#so");
//				var num;
//				for(let i=0;i<soCells.length;i++){
//					
//						soCells[i].addEventListener("click",function(){
//							soldOutWarp.classList.remove("unshow");
//							soldOutWarp.classList.add("show");
//							num = i;
//						})
//						soCancel.addEventListener("click",function(){
//							soldOutWarp.classList.remove("show");
//							soldOutWarp.classList.add("unshow");
//							
//						})
//					}
//				
//				so.addEventListener("click",function(e){
//					soldOutWarp.classList.remove("show");
//					soldOutWarp.classList.add("unshow");
//					soSmile.classList.remove("unshow");
//					putaway.removeChild(tabCells[num]);
//					pbNum.innerText-=1;
//					console.log(tabCells); 
//					
//					setTimeout(function(){
//						soSmile.classList.add("unshow");
//					},1000)
//				})
//				
//			}
//			
//			
////			点击删除按钮的函数
//			function del(){
//				var delSmile = document.querySelector(".delSmile")
//				var delCells = document.querySelectorAll("#delCell");
//	//			点击删除时取消按钮
//				var delCancel = document.querySelector("#delCancel");
//	//			点击删除时下架按钮
//				var del = document.querySelector("#del");
//				var num;
//				for(let i=0;i<delCells.length;i++){
//					
//						delCells[i].addEventListener("click",function(){
//							delWarp.classList.remove("unshow");
//							delWarp.classList.add("show");
//							num = i;
//						})
//						delCancel.addEventListener("click",function(){
//							delWarp.classList.remove("show");
//							delWarp.classList.add("unshow");
//							
//						})
//					}
//				
//				del.addEventListener("click",function(e){
//					delWarp.classList.remove("show");
//					delWarp.classList.add("unshow");
//					delSmile.classList.remove("unshow");
//					putaway.removeChild(tabCells[num]);
//					pbNum.innerText-=1;
//					console.log(tabCells); 
//					setTimeout(function(){
//						delSmile.classList.add("unshow");
//					},1000)
//				})
//				
//			}
//			
////			点击推广按钮时的函数
//			function share(){
////				小按钮
//				var shareCells = document.querySelectorAll(".shareCell");
////				整个标签内容
//				var generTab = document.querySelector(".generTab");
////				取消按钮
//				var generCancel = document.querySelector(".generCancel")
//				
//				for(let i = 0;i<shareCells.length;i++){
//					shareCells[i].addEventListener("click",function(){
//						generWarp.classList.remove("unshow"); 
//						generTab.classList.remove("downHidden");
//						generTab.classList.add("down");
//						
//					})
////					取消按钮
//					generCancel.addEventListener("click",function(){
//						generWarp.classList.add("unshow"); 
//						generTab.classList.remove("down");
//						generTab.classList.add("downHidden");
//					})
//					
//				}
//				
//				
//				
//			}
//			
////			点击置顶按钮时的函数
//			function goTop(){
////				置顶按钮
//				var goTops = document.querySelectorAll(".goTop");
//				var gtSmile = document.querySelector(".gtSmile");
//				var tmp;
//				
//				for(let i = 0;i<goTops.length;i++){
//					goTops[i].addEventListener("click",function(e){
//						tmp=putaway.children[i];
//						putaway.removeChild(putaway.children[i]);
//						putaway.insertBefore(tmp,putaway.childNodes[0]); 
//						gtSmile.classList.remove("unshow");
//						
//						var barNode = e.target.parentNode.parentNode;
//						barNode.style.display="none";
//						isMores[i]=false;
//						pbMoreList[i].classList.remove("icon-cancel");
//						pbMoreList[i].classList.add("icon-more");
//						e.stopPropagation();
//						setTimeout(function(){
//							gtSmile.classList.add("unshow");
//						},1000)
//						
//					})
//				}
//				
//				
//				
//			}
//		
//		
//	}
	
//	!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
		
	
	
//			批量管理事件触发
			var isClick=false;
			var isSelectAll=false;
			var fCC;
			var putBat;
			var selectAll;
			var isTabClicks=new Array();
			var isTabClick;
			
			
//			var cellClick = new function;
			batchManage.addEventListener("click",function(){
				isBatchManage=true;
				console.log(tabCells);
				fCC=document.querySelector(".footerCellCotainer");
				fCC.classList.add("unshow");
//				上架批量管理
				putBat=document.querySelector(".putBat");
				putBat.classList.remove("unshow");
				magni.classList.add("unshow");
				done.classList.remove("unshow");
//				isClick=false;
//				console.log(tabCells);
//				tcContent.classList.add("tccChangeWidth");
				if(!isClick){
//					isTabClicks=new Array();
					isTabClick=false;
//					改变商品信息块的默认布局
					tabCells.forEach(function(el,index){
						el.children[1].classList.remove("tccWidth");
						el.children[1].classList.add("tccChangeWidth");
						
						tccSelect=document.createElement("div");
						tccSelect.classList.add("tccSelect");
	//					console.log(el.childNodes[0]);
						el.insertBefore(tccSelect,el.childNodes[0]);
					})
					
					for(let i=0;i<tabCells.length;i++){
						isTabClicks.push(false);
						
					}
					
					//			点击商品
					for(let i=0;i<tabCells.length;i++){
						
					}
					
					
						selectAll=document.querySelector(".selectAll");
						selectAll.addEventListener("click",selected);
						
						
				}
				
				
				
				
			})
			function selected(){
//			点击全选
			if (!isSelectAll) {
//				debugger
				selectAll.children[0].classList.add("iconfont");
				selectAll.children[0].classList.add("icon-selected");
				isSelectAll=true;
				for(let i=0;i<tabCells.length;i++){
					
					console.log(isSelectAll);
					tabCells[i].children[0].classList.add("iconfont");
					tabCells[i].children[0].classList.add("icon-selected");
					isTabClicks[i]=true;
//									console.log(isTabClicks);
				}
				
				
				
				
			}
//							取消全选
			else{
//				debugger
				selectAll.children[0].classList.remove("iconfont");
				selectAll.children[0].classList.remove("icon-selected");
				isSelectAll=false;
				for(let i=0;i<tabCells.length;i++){
					console.log(isSelectAll);
//									console.log(tabCells[i]);
					tabCells[i].children[0].classList.remove("iconfont");
					tabCells[i].children[0].classList.remove("icon-selected");
					isTabClicks[i]=false;
//									console.log(isTabClicks);
				}
				
				
			}
		}
			
//			完成事件触发
			done.addEventListener("click",function(){
				tabCells.forEach(function(el,index){
//								debugger
//					console.log(el.childNodes);
					el.children[2].classList.add("tccWidth");
					el.children[2].classList.remove("tccChangeWidth");
//					console.log(el.children[0]);
					el.removeChild(el.children[0]);
					tccSelect=null;
					selectAll.removeEventListener("click",selected)
					
					doneClick=true;
					putBat.classList.add("unshow");
					fCC.classList.remove("unshow");
					done.classList.add("unshow");
					magni.classList.remove("unshow");
					isSelectAll=false;
					selectAll.children[0].classList.remove("iconfont");
					selectAll.children[0].classList.remove("icon-selected");
//					console.log(tabCells[2]);
					isBatchManage=false;
					isTabClicks=[];
//					debugger
				})
			})
			
			pbDel.addEventListener("click",function(){
				console.log(tabCells.length);
//				console.log(tabCells);
				for(let i=0;i<tabCells.length;i++){
					tabCells;
					debugger
					if (isTabClicks[i]) {
						debugger
						putaway.removeChild(tabCells[i]);
						isTabClicks.splice(i,1);
						tabCells.splice(i,1);
						i--;
					}
				}
				pbNum.innerText=tabCells.length;
			}) 
			
			// 点击返回
			back.addEventListener("click",function(){
				location.href = "../DP_index.html"
			})
			
			
		</script>
	</body>
</html>
